// 原教程链接 http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
.gridWrap {
    display: grid;      // 父元素转为grid网格布局。
    // display: inline-grid;    // 行内元素兼grid布局
    >div {
        font-size: 20px;
        color: #fff;
        font-weight: bold;
    }
}
// 上面代码定义好了初始样式，可见容器内的div是从上往下排列的，没有效果，既让叫他网格布局就有一定的原因，容器是由一条条网格线构成的，网格线圈住的区域叫单元格。



// 容器属性
// grid-template-columns：划分单元格, 定义每一列的宽度
// grid-template-rows：定义每一行的高
// 划分为3行3列共9个单元格
.gridWrap {
    // grid-template-rows: 150px 150px 150px;      // 划分3行，每行150px
    // grid-template-columns: 100px 100px 100px;   // 划分4列，每列100px
    // fr关键字，表示片段。也可与固定像素搭配使用
}

// 除了写固定像素还可以写百分比
.gridWrap {
    // grid-template-rows: 33.33% 33.33% 33.33%;
    // grid-template-columns: 33.33% 33.33% 33.33%;
}

// repeat：如果行和列特别多就像24栅格布局，还可以写repeat函数来平铺, 第一个参数为平铺多少次，第二个参数为要重复的值(不一定为1个值，也可写一组)
.gridWrap {
    // grid-template-columns: repeat(3, 33.33%);
    // grid-template-rows: repeat(3, 100px);
}

// auto-fill：自动填充，希望每一行容纳更多的单元格。
.gridWrap {
    // width: 500px;
    // grid-template-rows: 150px 150px 150px;
    // grid-template-columns: repeat(auto-fill, 100px);
}

// fr：表示片段，也可与固定像素一起使用。
.gridWrap {
    // grid-template-rows: 3fr 2fr 1fr;        // 行高比例3:2:1
    // grid-template-columns: repeat(3, 100px);
}

// minmax：创建一个长度范围，接收两个参数分别为最小值和最大值。
.gridWrap {
    // grid-template-rows: 1fr 1fr minmax(50px, 1fr);  // 第三行单元格高度最高为1fr，最小为50像素
    // grid-template-columns: 100px 100px 100px;
}

// auto：游浏览器决定长度
.gridWrap {
    // grid-template-rows: 1fr auto minmax(50px, 1fr);
    // grid-template-columns: 100px 100px 100px;
}

// 网格线名称：可以使用[名字]来给每一个网格线取名字，以便后面引用，（写在单元格间）
// .gridWrap {
//     grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
//     grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4];
// }

// grid-row-gap、grid-column-gap：设置行间距、列间距。
// grid-gap：行和列的间距，简写形式，grid-gap：行间距 列间距;   如果只写一个值，代表两个值
// tip: 最新标准，此三个属性已经不需要写grid-前缀，直接写为row-gap、column-gap、gap
.gridWrap {
    // grid-template-rows: repeat(3, 100px);
    // grid-template-columns: repeat(3, 100px);
    // row-gap: 10px;
    // column-gap: 10px;
    // gap: 10px;   //相当于上面两行写法
}

// grid-template-areas：指定区域，一个区域不一定由一个单元格组成，可以包含多个单元格，如果某些区域不需要取名，可以用.代替
// 区域命名会影响到网格线，网格线会自动命名为 区域名-start和区域名-end
.gridWrap {
    // grid-template-rows: repeat(3, 100px);
    // grid-template-columns: repeat(3, 100px);
    // grid-template-areas: 'a b c'
    //                      'd e f'
    //                      'g h i';
    // 合并单元格为区域写法
    // grid-template-areas: 'sider header header'
    //                      'sider main main'
    //                      'sider footer footer';
}




// 项目属性
// grid-column-start、grid-column-end、grid-row-start、grid-row-end，指定该项目的列的起始结束位置与行的起始结束位置(网格线)。
// tip: 网格线名字默认从左到右、从上到下为从1开始的数字，如果网格线已取名，值可以写网格线名字。
// tip: 如果在定位项目位置后项目发生重叠，会对比项目的z-index来决定显示哪一个。
.gridWrap {
    // grid-template-rows: repeat(4, 100px);
    // grid-template-columns: repeat(3, 100px);
    // >div:nth-of-type(1) {
    //     grid-column-start: 1;
    //     grid-column-end: 3;
    //     // 没有指定行的开始和结束位置，会采用默认位置。
    // }
    // // 还可以用span关键字表示跨越多少网格。
    // >div:nth-of-type(1) {
    //     grid-row-start: span 2; //跨越两行
    // }
}
// grid-column、grid-row表示grid-column-start和grid-column-end、grid-row-start和grid-row-end的缩写形式，值用/隔开栗子：grid-column：1 / 3

// grid-area：表示该项目放到哪个单元格内，值为单元格的名字，或者为四个网格线用/分开，为row-start / column-start / row-end / column-end。
.gridWrap {
    // grid-template-rows: repeat(3, 100px);
    // grid-template-columns: repeat(3, 100px);
    // grid-template-areas: 'a b c'
    //                      'd e f'
    //                      'g h i';
    // // >div:nth-of-type(1) {
    // //     grid-area: e;
    // // }
    // >div:nth-of-type(1) {
    //     grid-area: 2 / 2 / 3 / 3;
    // }
}

// justify-self、align-self、place-self：设置单元格内容的水平位置、垂直位置、简写。值为：start | end | center | stretch，简写顺序为align-self justify-self。
.gridWrap {
    // grid-template-rows: repeat(3, 100px);
    // grid-template-columns: repeat(3, 100px);
    // >div:nth-of-type(2) {
    //     width: 50px;
    //     height: 50px;
    //     justify-self: center;
    //     align-self: center;
    //     // place-self: center;  // 等同于上面的效果
    // }
}




// 容器属性
// grid-auto-flow：grid划分网格后，子元素会按照先行后列放置，可以由此属性改变为先列后行
.gridWrap {
    // grid-template-rows: repeat(4, 100px);
    // grid-template-columns: repeat(3, 100px);
    // grid-auto-flow: column; // 先列后行
}

// dence：某些项目指定位置后，剩下的项目尽量不要出现空格。
.gridWrap {
    // grid-template-rows: repeat(4, 100px);
    // grid-template-columns: repeat(3, 100px);
    // >div:nth-of-type(1), >div:nth-of-type(2) {
    //     grid-column-start: 1;
    //     grid-column-end: 3;
    // }
    // grid-auto-flow: row dense;  // 不声明会造成第三个单元格为空。
}

// justify-items、align-items、place-items：设置单元格内容的水平位置，垂直位置，简写。值： start | end | center | stretch
.gridWrap {
    // grid-template-rows: repeat(3, 100px);
    // grid-template-columns: repeat(3, 100px);
    // justify-items: center;
    // align-items: center;
    // // place-items: center center;
    // >div {
    //     width: 90px;
    //     height: 90px;
    // }
}

// justify-content、align-content、place-content：整个内容区域在容器里面的水平位置、垂直位置、简写。值为：start | end | center | stretch | space-around | space-between | space-evenly
.gridWrap {
    // width: 500px;
    // height: 500px;
    // grid-template-rows: repeat(3, 100px);
    // grid-template-columns: repeat(3, 100px);
    // place-content: center center;
}

// grid-auto-columns、grid-auto-rows：有时一些项目出现在网格外部，比如9宫格，指定第9个在第四行，浏览器会自动生成网格。此属性用来设置浏览器新增网格的行宽大小，如果不指定则由浏览器决定
.gridWrap {
    // grid-template-rows: repeat(3, 100px);
    // grid-template-columns: repeat(3, 100px);
    // grid-auto-rows: 50px;
    // >div:nth-of-type(9) {
    //     grid-row-start: 4;
    // }
}

// grid-template：grid-template-columns、grid-template-rows和grid-template-areas这三个属性的简写
// grid：grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的简写
